<template>
    <div>
        <div class="hint">
            <div class="bg">
                <img src="../assets/image/wq/bg1.png"/>
            </div>
            <div class="bg">
                <img src="../assets/image/wq/bg.png">
            </div>
            <div class="bg">
                <p>
                    <span class="iconfont icon-fanhui"></span>
                </p>

                <p>
                    <span class="iconfont icon-daifukuan"></span>
                    待支付
                </p>
                <p>
                    剩余<span>1</span>小时<span>40</span>分钟关闭
                </p>
            </div>
        </div>
        <div class="sele">
            <mt-radio
                    align="right"
                    v-model="value"
                    :options="['微信支付', '支付宝', '银行卡']">
            </mt-radio>

        </div>
        <div class="affirm">
            <span>实付：</span>
            <span>￥</span>
            <span>218</span>
            <div class="part">订单详情</div>
            <div class="pay">付款</div>
        </div>
    </div>
</template>

<script>
    window.onload = window.onresize = function () {
        document.documentElement.style.fontSize = 37.5 * document.documentElement.clientWidth / 375 + 'px';
    };
    export default {
        name: "Payment"
    }
</script>

<style scoped lang="less">
    @baseFont:37.5;
    html{
        padding: 0;
        margin: 0;
        font-size: @baseFont*1px;

    }

    .px2rem(@name,@px){
    @{name}:@px/@baseFont/2*1rem;
    }
    .hint{
        position: absolute;
        z-index: 1;
        .px2rem(width,750);
        .px2rem(height,428);
        .bg{
            .px2rem(width,750);
            position: absolute;
            img{
                .px2rem(width,750)
            }
            p{
                text-align: center;
                .px2rem(font-size,30);
                color: white;
                span{
                    .px2rem(font-size,30);
                }

            }
            p:nth-child(2){
                .px2rem(margin-top,40);
                .px2rem(margin-bottom,20)
            }
        }
        .bg:last-child{
            .px2rem(top,44)
        }
    }
    .sele{
        .px2rem(width,710);
        position: absolute;
        .px2rem(top,280);
        .px2rem(left,20);
        .px2rem(border-radius,20);

        z-index: 99;
        span{
            .px2rem(font-size,37.5);
        }
        ul{
            .px2rem(padding,20);
            li{

                .px2rem(height,90);
                .px2rem(line-height,90);
                input{
                    .px2rem(margin-top,30);
                    float: right;
                }
            }
        }
    }
    .tuijian{
        background: #ff0000;
        display: inline-block;
        color: white;
        .px2rem(width,80);
        .px2rem(height,40);
        .px2rem(line-height,40);
        text-align: center;
        .px2rem(font-size,20);
        .px2rem(margin-left,10);
        .px2rem(border-radius,15)
    }
    .dis{
        .px2rem(font-size,24);
        .px2rem(margin-left,10);
        color: #999999;
    }
    .affirm{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        .px2rem(width,750);
        .px2rem(height,88);
        .px2rem(padding,10);
        .px2rem(line-height,88);
        .px2rem(font-size,24);
        background: white;
        box-shadow:0px 0px 5px #333333;;
    }
</style>